import React, { useEffect, useRef, useState } from "react";
import { Graph, register, treeToGraphData } from "@antv/g6";
import { Button, Card, Select, Space, Typography } from "antd";
import { ArrowsAltOutlined, ShrinkOutlined } from "@ant-design/icons";
import { ReactNode } from "@antv/g6-extension-react";
const { Title, Text } = Typography;
const { Option } = Select;

// 注册React节点扩展
register("node", "react", ReactNode);
const NodeComponent = ({ data, graph }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [editValue, setEditValue] = useState(data.url || "");
  console.log(data, "data");
  const [fold, setFold] = useState(true);
  // 显示详细信息模态框
  const showDetails = () => {
    setModalVisible(true);
  };

  return (
    <Card
      size="small"
      bordered
      style={{
        width: 280,
        borderRadius: 8,
        position: "relative",
        boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
        borderColor: data.status === "error" ? "#ff4d4f" : "#d9d9d9",
      }}
      title={data.id}
    >
      <h2>{data.data.url}</h2>
    </Card>
  );
};
const DagreGraph = () => {
  const containerRef = useRef(null);
  const graphRef = useRef(null);
  const [layout, setLayout] = useState("default");
  const [dimensions, setDimensions] = useState({ width: 800, height: 500 });

   
  useEffect(() => {
    if (!containerRef.current) return;
  
    const data = {
      nodes: [
        {
          id: "0",
          target: ["1", "2"],
          label: "Start",
          data: { url: "https://www.baidu.com" },
          // 修正锚点定义：索引0=右边，索引1=左边
          anchorPoints: [
            [1, 0.5], // 右边 (索引0)
            [0, 0.5]  // 左边 (索引1)
          ],
        },
        {
          id: "1",
          target: ["3", "4"],
          label: "Step 1",
          data: { url: "https://www.baidu.com" },
          anchorPoints: [
            [1, 0.5], // 右边 (索引0)
            [0, 0.5]  // 左边 (索引1)
          ],
        },
        {
          id: "2",
          target: ["3", "5"],
          label: "Step 2",
          data: { url: "https://www.baidu.com" },
          anchorPoints: [
            [1, 0.5], // 右边 (索引0)
            [0, 0.5]  // 左边 (索引1)
          ],
        },
        {
          id: "3",
          target: null,
          label: "Decision",
          data: { url: "https://www.baidu.com" },
          anchorPoints: [
            [1, 0.5], // 右边 (索引0)
            [0, 0.5]  // 左边 (索引1)
          ],
        },
        {
          id: "4",
          target: null,
          label: "Process A",
          data: { url: "https://www.baidu.com" },
          anchorPoints: [
            [1, 0.5], // 右边 (索引0)
            [0, 0.5]  // 左边 (索引1)
          ],
        },
        {
          id: "5",
          target: null,
          label: "Process B",
          data: { url: "https://www.baidu.com" },
          anchorPoints: [
            [1, 0.5], // 右边 (索引0)
            [0, 0.5]  // 左边 (索引1)
          ],
        },
      ],
      edges: [
        // 修正锚点索引：父节点使用右边锚点(0)，子节点使用左边锚点(1)
        { source: "0", sourceAnchor: 0, targetAnchor: 1, target: "1" },
        { source: "0", sourceAnchor: 0, targetAnchor: 1, target: "2" },
        { source: "1", sourceAnchor: 0, targetAnchor: 1, target: "4" },
        { source: "1", sourceAnchor: 0, targetAnchor: 1, target: "3" },
        { source: "2", sourceAnchor: 0, targetAnchor: 1, target: "5" },
        { source: "2", sourceAnchor: 0, targetAnchor: 1, target: "3" },
      ],
    };
  
    const graph = new Graph({
      container: containerRef.current,
      width: dimensions.width,
      height: dimensions.height,
      data,
      layout: {
        type: "dagre",
        rankdir: "LR",
        align: "DL",
        nodesep: 150,
        ranksep: 370,
        controlPoints: true,
      },
      node: {
        type: "react",
        // 关键：定义节点大小（必须）
        size: [280, 100], // 宽度280px，高度100px
        style: {
          component: (data) => {
            return <NodeComponent data={data} graph={graph} />;
          },
        },
        // 关键：全局锚点定义
        anchorPoints: [
          [1, 0.5], // 右边 (索引0)
          [0, 0.5]  // 左边 (索引1)
        ],
      },
      edge: {
        type: "line",
        style: {
          // 修正箭头配置
          endArrow: {
            path: 'M 0,0 L 8,4 L 8,-4 Z',
            fill: '#a0a0a0',
            offset: -5
          },
          stroke: "#a0a0a0",
          lineWidth: 2,
        },
        // 添加曲线偏移使连线更平滑
        curveOffset: 30,
      },
      behaviors: ["drag-element", "drag-canvas", "zoom-canvas"],
    });
  
    graph.render();
  
    graphRef.current = graph;
  
    return () => {
      if (graph && !graph.destroyed) {
        graph.destroy();
      }
    };
  }, [dimensions, layout]);
 

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        height: "100vh",
        padding: "16px",
        background: "#f5f7fa",
      }}
    >
      

      <div
        ref={containerRef}
        style={{
          flex: 1,
          background: "#fff",
          borderRadius: 8,
          boxShadow: "0 4px 12px rgba(0,0,0,0.05)",
          border: "1px solid #e8e8e8",
        }}
      />
    </div>
  );
};

export default DagreGraph;
